<template>
  <div class="login">
    <div class="menu">
      <h1>欢迎登录</h1>
      <div class="form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label prop="mobile">
            <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label prop="password">
            <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-link type="primary">主要链接</el-link>
            <el-link type="success">成功链接</el-link>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" style="width: 100%;" plain @click="login('ruleForm')">立即登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" style="width: 100%;" plain @click="toregister">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
      <ul class="smscode">
        <li>
          <el-link type="primary">忘记密码</el-link>
        </li>
        <li>
          <el-link type="primary" @click="tosmscode">短信登录</el-link>
        </li>
      </ul>
      <!-- <ul class="login-img">
        <li>
          <div>
            <img src="../../assets/static/image/weixing.png" width="60" alt />
          </div>
          <div>
            <img src="../../assets/static/image/QQ.png" width="60" alt />
          </div>
          <div>
            <img src="../../assets/static/image/github.png" width="60" alt />
          </div>
        </li>
      </ul>-->
    </div>
  </div>
</template>

<script>
import { Login } from "@/utils/http";
export default {
  data() {
    return {
      ruleForm: {
        mobile: "",
        password: ""
      },
      activeName: "first",
      rules: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机号",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    login(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          // console.log(this.$crypto.encrypt(this.ruleForm.password));
          Login(
            this.ruleForm.mobile,
            this.$crypto.encrypt(this.ruleForm.password)
          )
            .then(res => {
              if (res.data.code == 200) {
                localStorage.setItem("token", "Bearer " + res.data.data.token);
                this.$store.commit("setUserinfo", res.data.data);
                this.$message({
                  message: "登录成功",
                  type: "success",
                  center: true
                });
                this.$router.push("/home/networkdisk");
              } else {
                this.$message({
                  message: "登录失败，用户名或密码错误",
                  type: "warning",
                  center: true
                });
              }
            })
            .catch(err => {
              this.$message.error(err.message);
            });
        } else {
          this.ruleForm = {};
          return false;
        }
      });
    },
    /*跳转注册*/

    toregister() {
      this.$router.push("/register");
    },
    /**短信登录页面跳转 */
    tosmscode(){
      this.$router.push("/smscode");

    }
  }
};
</script>

<style lang="less" scoped>
.login {
  color: rgb(48, 78, 114);
  background-image: url(../../assets/static/image/bj.png);
  width: 100%;
  height: 100%;
  position: relative;
}

.menu {
  width: 450px;
  height: 500px;

  // border: 1px solid #000;
  // margin: 0 auto;
  position: absolute;
  top: 10%;
  right: 6%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  // background-color: rgb(246, 215, 109);
  border-radius: 6px;

  //  padding-left: ;
  > h1 {
    text-align: center;
    margin: 55px 0;
  }
}

.form {
  width: 350px;
  margin: 0 auto;
}

// .form-btn {
//   width: 100%;
//   background-color: rgb(48, 78, 114);
//   color: #fff;
//   border: 0;
//   height: 50px;
//   font-size: 20px;
// }
// .form-btn-regist{

// }

.login-img {
  // margin-top: 15px;
  > li {
    // text-align: center;
    width: 350px;
    // border: 1px solid #fff;
    margin: 0 auto;
    // margin-top: 16px;
    display: inline-block;
    display: flex;

    > div {
      flex: 1;
      // text-align: center;
      // float: left;
      // margin-right: 58px;
    }
  }

  // margin-right: 16px;
}
.smscode {
  // font-size: 16px;
  display: flex;
  justify-content: space-around;
}
</style>